<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="author" content="m.jd.com">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/resources/wap/css/framework7_002.css">

    <link rel="stylesheet" type="text/css"
          href="/resources/wap/css/swiper.min.css" charset="gbk" />
    <link rel="stylesheet" type="text/css"
          href="/resources/wap/css/search.css" charset="gbk" />
    <title>Title</title>
    <style type="text/css">
        div.head{
            position: static;
            height: 10%;
            width: 100%;
            border: 1px solid #F8F8F8;
            padding-top: 20px;
        }
        div.middle{
            width: 100%;
            height: 80%;
            min-height: 80%;
        }

        div.subClazz{
            float: left;
            width: 20% !important;
            min-width: 85px;
            height: 100%;
            overflow: hidden;
            font-size: 16px;
            line-height: 46px;
            text-decoration: none;
            font-size: 13px;
            color: #080808;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            background: #F8F8F8;
            text-align: center;
        }
        .sub-clazz span{
            height: 50px;
            font-size: 15px;
        }
        .product{
            float: right;
            width: 75% !important;
            height: 100%;
           overflow-y: scroll;
        }
        .product-detail{
            background: #eee;
            padding:5px;
            border-radius: 3px;
            float: left;
            height: auto;
            margin-left:2px;
        }
        .product-detail span{
            width: 100%;
            height: 20px;
            display: block;
            text-align: center;

        }
        .product-image{
            width: 100px;
            height: 100px;
            background-size: 100% 100%;
        }



        .swiper-slide{width: auto!important;}
        .topmenu{height: 35px;
            background-color: white;
            padding: 0 10px;
            line-height: 35px;
            font-family: "微软雅黑"
        }
        .root-class{
            font-size: 18px;
        }
        span.active{
            color: #007aff;
        }

    </style>
    <script src="/resources/js/jquery-1.11.1.min.js"></script>
    <script src="/resources/js/self.js?r=1"></script>
    <script src="/resources/wap/js/swiper.min.js"></script>
</head>
<body style="height:100%;width:100%;padding:0;margin: 0;position: absolute">
<div class="search-div">
    <div>
        <input name="name" >
        <button onclick="search();"  class="search-btn"></button>
    </div>
</div>
<div class="head">
    <div class="topmenu">
        <div class="root-class">
            <div class="swiper-wrapper root-item">

            </div>
        </div>
    </div>
</div>
<div class="middle">
        <div class="subClazz">
            <div class="swiper-wrapper sub-clazz">


            </div>
        </div>
    <div class="product">

    </div>
    <div style="clear: both">

    </div>

</div>

<div class="toolbar tabbar tabbar-labels">
    <div class="toolbar-inner">
        <a href="product_list.html" class="tab-link active">
            <i class="material-icons"><img src="/resources/wap/image/home_on.png" width="32px"></i>
            <span class="tabbar-label">首页</span></a>
          <a href="cart.html" class="tab-link">
              <i class="material-icons"><img src="/resources/wap/image/cart.png"  width="32px"></i>
              <span class="tabbar-label">购物车</span></a>
        <a href="my.html" class="tab-link ">
            <i class="material-icons"><img src="/resources/wap/image/my.png"  width="32px"></i>
            <span class="tabbar-label">我的</span></a></div>
</div>
<div style="width: 0px">

</div>
</body>

<script type="application/javascript">

var _pageFlag = false;
var params = {
    page: 1,
    size:10
}

var rootClazz = new Array();
var subClazz = {};

$(function () {
    ajaxGetData();
    rootClazzInit();
    subClazzInit(rootClazz[0]["id"]);
    loadProduct(rootClazz[0]["id"],"");

});
function ajaxGetData() {
    $.ajax({
        url: "/wap/customer/classification/treeMap.do",
        data: {},
        dataType: 'json',
        async:false,
        type: 'post',
        success: function (data) {
            console.log(data);
            if (data.success) {
                $(data.data).each(function (index,item) {
                    rootClazz.push({"id":item.id,"name":item.name});
                    if(!isNullOrUndefined(item.subList)){
                        var _subList = new Array();
                        $(item.subList).each(function(i,subItem){
                            _subList.push({"id":subItem.id,"name":subItem.name});
                        })
                        subClazz["\'"+item.id+"\'"] = _subList;
                    }
                });
            } else {

            }
        }
    });

}
function rootClazzInit() {
    var html = "";
    $(rootClazz).each(function (i,item) {
        html =html +" <span data='"+item.id+"' class='swiper-slide'>"+item.name+"</span>";
    });
    $(".root-item").html(html);
    bindRootClick();
    var swiper = new Swiper('.root-class', {
        spaceBetween: 20,
        slidesPerView:'auto',
        freeMode: true
    });
}

function subClazzInit(rootId) {
    var  _subClazz =  subClazz["\'"+rootId+"\'"];
    var html = "";
    $(_subClazz).each(function (i,item) {
        html =html +" <span data='"+item.id+"' class='swiper-slide'>"+item.name+"</span>";
    });
    $(".sub-clazz").html(html);
    var swiper = new Swiper('.subClazz', {
        spaceBetween: 20,
        slidesPerView:'auto',
        direction: 'vertical',
        freeMode: true
    });
    bindSubClick();
}
function bindRootClick() {
    $(".root-item span").click(function () {
        var id = $(this).attr("data");
        $(".root-item span").removeClass("active");
        $(this).addClass("active");
        subClazzInit(id);
        loadProduct(id,"");
    });
}
function bindSubClick() {
    $(".sub-clazz span").click(function () {
        var id = $(this).attr("data");
        $(".sub-clazz span").removeClass("active");
        $(this).addClass("active");
        loadProduct("",id);
    });
}
$(window).scroll(function () {
    if (_pageFlag) {
        if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
            _pageFlag = false;
            params['page'] = params['page'] + 1;
            loadData();
        }
    }
});
function loadProduct(rootClazzId,clazzId) {
    params["rootClazzId"] = rootClazzId;
    params["clazzId"] = clazzId;
    $.ajax({
        url: "/wap/customer/product/queryPage.do",
        data: params,
        dataType: 'json',
        async:false,
        type: 'post',
        success: function (data) {
            console.log(data);
            if (data.success) {
                var html ="";
                $(data.data.data).each(function (index,item) {
                    var brand = item.brand;
                    var brandName = "";
                    if(!isNullOrUndefined(brand)){
                        brandName = "品牌:"+brand.name;
                    }
                    html =  html+"<div class='product-detail'>" +
                            "<div  class='product-image' " +
                            "onclick='showProduct(\""+item.id+"\")' "+
                        "style='background-image: url(\""+item.image+"\")'></div>"+
                            "<span>"+item.name+"</span>"+
                        "<span>"+brandName+"</span>"+
                        "</div>";
                });
                $(".product").html(html);
            } else {

            }
        }
    });
}
function showProduct(id) {
    window.location.href="product_show.html?productId="+id;
}
function search() {
    var name =$("[name='name']").val();
    window.location.href="product_search_result.html?name="+name;
}
</script>
</html>